Web Performances
Dalam pembuatan suatu project pastinya kita menginginkan performa yang bagus. Berikut ada beberapa tips untuk meningkatkan performa sebuah website.
Minify HTML, CSS & JavaScript
Meminimalkan sumber daya berarti menghapus karakter yang tidak perlu dari HTML, JavaScript, dan CSS Anda yang tidak perlu dimuat, seperti karakter spasi putih, karakter baris baru, Komentar, dan pembatas Blok.
Ini akan mempercepat waktu loading web anda karena mengurangi jumlah kode yang harus diminta dari server.
Minify plugins untuk otomisasi task systems: Grunt dan Glup
Tools untuk minifying code JavaScript: JSMin dan YUI Compressor
html{overflow-x:hidden}body{font-family:Poppins,sans-serif;font-size:14px;line-height:23px;font-weight:400;background:#f6f6f9;color:#222;overflow-x:hidden}div{display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}ul{list-style:none;margin-bottom:0}p{font-family:Poppins,sans-serif;font-size:16px;line-height:150%;font-weight:400;color:#828282;-webkit-font-smoothing:antialiased;-webkit-text-shadow:rgba(0,0,0,.01) 0 0 1px;text-shadow:rgba(0,0,0,.01) 0 0 1px}p a{display:inline;position:relative;color:inherit;border-bottom:solid 2px #fde0db;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}a,a:active,a:hover,a:link,a:visited{text-decoration:none;-webkit-font-smoothing:antialiased;-webkit-text-shadow:rgba(0,0,0,.01) 0 0 1px;text-shadow:rgba(0,0,0,.01) 0 0 1px}.router-link-exact-active{color:#f95031!important}p a:active{position:relative;color:#ff6a3a}p a:hover{color:#ff6a3a;background:#fde0db}p a:hover::after{opacity:.2}::selection{background:#fde0db;color:#ff6a3a}p::selection{background:#fde0db}h1{font-size:72px}h2{font-size:40px}h3{font-size:32px}h4{font-size:26px}h5{font-size:18px}h6{font-size:14px}h1,h2,h3,h4,h5,h6{color:#222;font-weight:600;-webkit-font-smoothing:antialiased;-webkit-text-shadow:rgba(0,0,0,.01) 0 0 1px;text-shadow:rgba(0,0,0,.01) 0 0 1px}::-webkit-input-placeholder{font-size:16px!important;font-weight:500;color:#c2c2c2!important}:-moz-placeholder{font-size:16px!important;font-weight:500;color:#c2c2c2!important}::-moz-placeholder{font-size:16px!important;font-weight:500;color:#c2c2c2!important}:-ms-input-placeholder{font-size:16px!important;font-weight:500;color:#c2c2c2!important}::input-placeholder{font-size:16px!important;font-weight:500;color:#c2c2c2!important}section{display:block;position:relative;box-sizing:border-box}.clear{clear:both}.clearfix::after,.clearfix::before{content:"";display:table}.clearfix::after{clear:both}.clearfix{zoom:1}.float_left{float:left}.float_right{float:right}.trans_200{-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}.trans_300{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}.trans_400{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}.trans_500{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.fill_height{height:100%}.btn{border-radius:12px!important}.btn-primary{background-color:#f95031!important;border-color:#f95031!important}.btn-primary:hover{background-color:#ab2900!important;border-color:#ab2900!important}.btn-success{background-color:#34a770!important;border-color:#34a770!important}.btn-success:hover{background-color:#10673e!important;border-color:#10673e!important}.btn-warning{background-color:#fba63c!important;border-color:#fba63c!important}.btn-warning:hover{background-color:#af6a13!important;border-color:#af6a13!important}.btn-danger{background-color:#e31a1a!important;border-color:#e31a1a!important}.btn-danger:hover{background-color:#79170a!important;border-color:#79170a!important}.btn-info{background-color:#08a0f7!important;border-color:#08a0f7!important}.btn-info:hover{background-color:#0f679a!important;border-color:#0f679a!important}.btn-outline-primary{color:#f95031!important;border-color:#f95031!important}.btn-outline-primary:hover{background-color:#f95031!important;color:#fff!important}.btn-outline-success{color:#34a770!important;border-color:#34a770!important}.btn-outline-success:hover{background-color:#10673e!important;color:#fff!important}.btn-outline-warning{color:#fba63c!important;border-color:#fba63c!important}.btn-outline-warning:hover{background-color:#fba63c!important;color:#fff!important}.btn-outline-danger{color:#e31a1a!important;border-color:#e31a1a!important}.btn-outline-danger:hover{background-color:#e31a1a!important;color:#fff!important}.btn-outline-info{color:#08a0f7!important;border-color:#08a0f7!important}.btn-outline-info:hover{background-color:#08a0f7!important;color:#fff!important}@media only screen and (max-width:991px){h1{font-size:48px}h2{font-size:24px}}@media only screen and (max-width:767px){h1{font-size:36px}h6{font-size:12px}}
Reduce HTTP requests
Saat browser Anda mengambil data dari server, browser melakukannya menggunakan HTTP (Hypertext Transfer Protocol). Ini adalah permintaan/tanggapan antara klien dan host. Secara umum, semakin banyak permintaan HTTP, halaman web Anda akan semakin lambat dimuat. Ada banyak cara untuk mengurangi jumlah request diantaranya:
Sejajarkan JavaScript Anda — Menggabungkan semua skrip menjadi satu skrip, dan juga menggabungkan semua CSS menjadi satu lembar gaya. (hanya jika sangat kecil)
Menggunakan CSS Sprite — Gabungkan gambar latar Anda menjadi satu gambar dan gunakan properti gambar latar dan posisi latar belakang CSS untuk menampilkan segmen gambar yang diinginkan.
Kurangi pengguanaa plugin atau library pihak ke tiga.
Image maps. Gabungkan multiple image menjadi single image.
Gunakan sessionStorage API dan localStorage API untuk menyimpan data ke dalam browser.